{extend name="layout/base"}

{block name="content"}
<!--<style type="text/css">-->
	<!--.treeTable-icon .layui-icon-layer{-->
		<!--display: none;-->
	<!--}-->
<!--</style>-->
<div class="list_top">
    <div class="layui-inline">
        <input class="layui-input" name="key" id="key" placeholder="请输入分类名称">
    </div>
    <button class="layui-btn" id="search">搜索</button>
    <button class="layui-btn" id="add" data-type="reload"><i class="layui-icon">&#xe608;</i>添加</button>
</div>

<!-- <table lay-filter="table" id="table" class="table"></table> -->
<table id="table1" class="layui-table" lay-filter="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>

<script type="text/html" id="name">
    <div>{{d.html}}{{d.cate_name}}</div>
</script>

<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="recommend" value="{{d.cate_recommend}}" data-id="{{d.cate_id}}" title="推荐" lay-filter="recommend" {{ d.cate_recommend == 1 ? 'checked' : '' }}>
</script>

<script>	
    layui.use(['jquery', 'table', 'layer', 'form', 'treetable'], function ($, table, layer, form, treetable ) {
    	// 渲染表格        
        var opt = {
        	treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'cate_id',
            treePidName: 'cate_pid',
            treeDefaultClose: true,
            treeLinkage: false,
            elem: '#table1',
            url: "{:url('')}",
            method: 'post',
            page: true,
            toolbar: true,
            cols: [[
                {field: 'cate_id', title: 'ID'},
                {field: 'cate_name', title: '名称', templet: '#name'},
                {field: 'cate_priority', title: '排序', edit: 'number'},
                {field: 'cate_recommend', title: '是否设为推荐', templet: '#checkboxTpl', unresize: true},
                {title: '操作', toolbar: '#tool'}
            ]],
            where: {}
        }, tabIns1 = table.render(opt);
        // 渲染表格
        var tabIns = treetable.render(opt);
        $('#search').on('click', function() {
            var key = $('#key').val();
            tabIns1.reload({
                where: {key: key}
            });
        });
        // 添加栏目
        $('#add').on('click', function () {
        	layer.open({
        		type: 2,
        		area: ['50%', '50%'],
        		title: '添加',
        		content: "{:url('add')}"
        	})
        })
        table.on('tool(table)', function (obj) {
            var cid = obj.data.cate_id;
            switch (obj.event) {
                case 'del':                	
                    layer.confirm('确定要删除吗', function (index) {
                        $.get("{:url('del')}", {cid: cid});
                        layer.close(index);
                        location.reload()
                    });
                    break;
                case 'edit':
                    // location.href="{:url('edit')}?cid="+cid;
                    layer.open({
                        type: 2,
                        area: ['50%', '50%'],
                        title: '编辑',
                        content: "{:url('edit')}?cid=" + cid
                    })
                    break;
                default:
                    break;
            }
        });
        table.on('edit(table)', function(obj){
            var value = obj.value
                ,cid = obj.data.cate_id
                ,field = obj.field;
            $.ajax({
                url: '{:url("editPriority")}',
                type: "POST",
                data: {
                    field: field,
                    value: value,
                    cid : cid
                },
                success: function(res){
                    layer.msg(res.msg);
                }
            })
        });

        form.on('checkbox(recommend)', function(obj){
            var cid = $(this).data('id');
            $.ajax({
                url: '{:url("editRecommend")}',
                type: "POST",
                data: {
                    value: this.value,
                    cid : cid
                },
                success: function(res){
                    layer.msg(res.msg);
                }
            })
        });
    });    
</script>
{/block}
